<template>
  <div class="box">
    <div class="logo-position">
      <img src="@/assets/images/logo.png" alt="logo" /><span>达人小工具</span>
    </div>

    <div class="box-content">
      <el-card class="box-card-right">
        <div class="text-item">
          <div class="logo-div1"><span>账 号 登 录</span></div>
          <div class="logo-div2"><span>账号密码登录</span><span>验证码登录</span></div>
          <div class="logo-div3"><el-input v-model="username" type="text" placeholder="请输入账号" :prefix-icon="Calendar"
              style="width: 1.6rem" size="large" /></div>
          <div class="logo-div4"><el-input v-model="password" type="password" placeholder="请输入密码" :prefix-icon="Lock"
              style="width: 1.6rem" size="large" show-password /></div>

          <div class="logo-div7"><span>登录即表明同意 <span style="color: #410be4;"> 服务协议 </span> 和 <span
                style="color: #410be4;"> 隐私协议 </span></span></div>
          <div class="logo-div5"> <el-button type="primary" size="large" style="width: 1.6rem"
              @click="loginValidate">登录</el-button></div>
          <div class="logo-div6"><span>没有账号，前往 <a @click="enterRegister" style="color: #410be4;">注册</a></span></div>
        </div>
      </el-card>
      <el-card class="box-card-left" :body-style="{ display: 'flex', padding: '0' }">
        <div class="text-image">
          <h3 style="color:#ffffff;text-align: center;">达人小工具 达人带货好帮手</h3>
        </div>
      </el-card>
    </div>
  </div>
  <el-divider />
</template>

<script setup lang="ts">
import { Calendar, Lock } from '@element-plus/icons-vue'
import { ref,reactive } from 'vue'
const password = ref('')
const username = ref('')
import { useRouter } from "vue-router";

const router = useRouter();

const enterRegister = () => {
  router.push("/register");
}
import { ElMessage } from 'element-plus';
import { mobileRegExp } from '@/utils/validate'
import { useUserStore } from '@/store/modules/user'
import { getUserInfo,login } from '@/api'
const loginValidate = async () => {
  if (username.value.length === 0) {
    ElMessage.error('请输入账号手机号')
    return
  }
  if (!mobileRegExp.test(username.value)) {
    ElMessage.error('请输入正确的手机号')
    return
  }
  if (password.value.length === 0) {
    ElMessage.error('请输入密码')
    return
  }
  const { data } = getUserInfo()
  //const {  buttons,  roles, routes } = data
  //const authStore = useAuthStore()
  const userStore =useUserStore()
  const ruleForm = reactive({
  username: 'admin',
  password: 'atguigu123',
})
  const token=login(ruleForm)
  userStore.setToken(token)
  userStore.setUserInfo(data)
  router.push("/home/user");
}
</script>


<style scoped lang="scss" >
@import "./index.scss";
</style>